<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>
<!-- 
    列表过滤实现：
      1、先拿到input输入框的输入的数据
        --收集用户的输入，使用v-model实现双向数据绑定，来收集用户的输入信息
      2、根据拿到的数据对列表数据进行过滤
      


      思考：由于用户每一次在输入框输入新的内容，我们就要根据新的输入信息，去对当前列表进行一次过滤。也就是说，用户只要输入新的数据，我们就要过滤一次列表
      如何监测到用户输入的数据发生变化了呢？
      --可以使用watch这个配置项来实现监视属性,注意watch这给配置项不能写在data中，是和data平级的，在Vue的实例对象中



      计算属性什么时候会发生变化？
      1、初次读取时会发生变化
      2、当依赖的数据发生改变时会被再次调用
 -->

    <!--准备好一个容器-->
    <div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>    
<input type="text" placeholder="请输入名字..." v-model="keyWord">
  <ul>
   <li v-for="(p,index) in filPersons"  :key="p.id">
   {{p.name}}-{{p.age}}-{{p.sex}} 
 </li>   
</ul>    
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
   // 用watch实现
   // #region
/*     new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[  // 多个人使用数组存储信息,原数组
                {id:'001',name:'马冬梅',age:'18',sex:'女'},
                {id:'002',name:'周冬雨',age:'20',sex:'女'},
                {id:'003',name:'周杰伦',age:'22',sex:'男'},
                {id:'004',name:'温兆伦',age:'24',sex:'男'}
            ], 
            filPersons:[]  // 维护过滤后的数据                  
        },
        watch:{ 
          // 简写形式--有问题页面加载时不会出现原数组列表，需要随便输入一个字符，才会加载列表进行显示
          // keyWord(val){  // val--newValue  
          //     // console.log('keyWord发生改变了',val)  测试监听属性是否成
          //      this.filPersons = this.persons.filter((p)=>{ // p 代表数组中的每一个对象,return后面是匹配的条件，满足条件的数据会被返回
          //       // 函数体
          //       return p.name.indexOf(val) !== -1
          //     })
          // }  
          keyWord:{
            handler(val){
              immediate:true, // 会优先调用一次handler,此时val没有值，是一个空串
              this.filPersons = this.persons.filter((p)=>{
                return p.name.indexOf(val) !== -1
              })
            }
          }
            } 
    }) */
    // #endregion
  // 用computed实现
    new Vue({
        el:'#root',
        data:{ // data中的配置都叫做属性
            keyWord:'',
            persons:[  // 多个人使用数组存储信息,原数组
                {id:'001',name:'马冬梅',age:18,sex:'女'},
                {id:'002',name:'周冬雨',age:20,sex:'女'},
                {id:'003',name:'周杰伦',age:22,sex:'男'},
                {id:'004',name:'温兆伦',age:24,sex:'男'}
            ]
              
        },
        computed:{
          filPersons(){
              return  this.persons.filter((p)=>{// 该return是计算属性规定的必须返回的
              // 函数体
                 return  p.name.indexOf(this.keyWord) !== -1  // 该return是filter规定的返回的过滤条件，这么做的好处就是，我们不需要对keyWord进行监视，只要keyWord发生改变filPersons()这个函数就会被重新调用
            })
          }
        }
       
    })
</script>
</html>

